<template>
    <div id="app">
        <showRule name="addMenuBtn">
            <Button type="primary" style="margin: 10px 0 10px 0;" @click="editMenu(0, 0)">添加一级菜单</Button>
        </showRule>
        <Table row-key="id" :columns="columns" :data="list" border>
            <!--状态-->
            <template slot-scope="{ row, index }" slot="statusSlot">
                <a v-if="row.is_del == 0" @click="editMenu(row.pid, row.id)" href="javascript:">开启中</a>
                <a v-else @click="editMenu(row.pid, row.id)" href="javascript:">隐藏</a>
            </template>
            <!--操作-->
            <template slot-scope="{ row, index }" slot="makeSlot">
                <showRule name="editMenuBtn">
                    <Button type="info" @click="editMenu(row.pid, row.id)">编辑</Button>
                </showRule>
                <showRule name="addMenuBtn">
                    <Button type="primary" @click="editMenu(row.id, 0)" style="margin-left: 10px;">添加</Button>
                </showRule>
            </template>
        </Table>
    </div>

</template>

<script>
import _ from 'view-design/dist/styles/iview.css'

export default {
    data() {
        return {
            // 列表
            columns: [
                {
                    title: '菜单名称',
                    key: 'title',
                    tree: true
                },
                {
                    title: '路由名称',
                    key: 'name',
                },
                {
                    title: '排序',
                    key: 'sort',
                },
                {
                    title: '权限类型',
                    key: '类型',
                    render: (h, par) => {
                        let text = '';
                        switch (par.row.type) {
                            case 1:
                                text = '菜单权限';
                                break;
                            case 2:
                                text = '按钮显示';
                                break;
                            case 3:
                                text = '访问控制';
                                break;
                        }
                        return h("div", text);
                    }
                },
                {
                    title: '状态',
                    key: 'status',
                    slot: 'statusSlot'
                },
                {
                    title: '操作',
                    key: 'make',
                    slot: 'makeSlot'
                },
            ],
            // 数据
            list: [],
        }
    },
    methods: {
        // 获取菜单列表
        getMenuList() {
            this.$axios('/admin/menu/getMenuList').then(result => {
                this.list = result;
            });
        },
        editMenu(pid, id) {
            this.$router.push({
                name: "addMenu",
                params: {
                    pid: pid,
                    id: id
                }
            });
        },
    },
    created() {
        this.getMenuList();
    }
}
</script>

<style>

</style>
